import { useRef,useState } from "react";
import {Divider} from 'antd'
export default function UseRef() {

// ----------------------- 场景1 dom -----------------------
  const el = useRef(null);
  console.log("useRef el：", el);


  const handler = () => {
    console.log(el);
    console.log(el.current);
    el.current.innerHTML = "12341234";
  };


  // ----------------------- 场景2 存值 -----------------------


  const [state,setState] = useState({})
  const refContainer = useRef({ name: "zhangsan", age: 1 });
  console.log(refContainer);

  function handler2(){
    refContainer.current.age = refContainer.current.age +1
    console.log(refContainer.current)
  }
  function handler21(){
    setState({})
  }




  return (
    <div>
      <h4>useRef</h4>

      <h5>使用场景1.使用useRef获取DOM</h5>
      <button onClick={handler}>改变DOM</button>
      <div ref={el}>
        我是DOM - div
      </div>

      <Divider></Divider>


      <h5>场景2.使用useRef保存同步数据</h5>
      姓名：{refContainer.current.name} 年龄：{refContainer.current.age}
<br/>
      <button onClick={handler2}>1.点我，改变ref的值，查看console,但页面中的值不会改变 </button> 
      <br/><button onClick={handler21}>2.点我，页面中的值改变,因为useState的改变会重新渲染</button><br/><br/>

      所以：<br/>
      1.useRef的值改变时，不会重新渲染组件<br/>
      2.如果在UI中显示的数据，可以使用useRef<br/>
      3.如果需要同步改变数据(改变数据后马上就需要获取),也可以用useRef<br/>

      <br/><br/>


      useState 与 useRef 区别<br/>
1. useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。（useState异步更新其值，useRef同步更新。）<br/>
2. useState触发重新渲染，useRef不触发<br/>
3. useRef（）钩不仅用于DOM引用。“ ref”对象是通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。<br/>
4. 变量是决定视图图层渲染的变量，请使用useState，其他用途useRef<br/>
5. useRef特性：可变的ref对象，持久化<br/>

    </div>
  );







}
